<template>
  <div v-if="exam">
    <h1>{{ exam.examTitle }}</h1>
    <p>{{ exam.description }}</p>
    <el-form>
      <el-form-item
          v-for="(question, index) in exam.questions"
          :key="index"
          style="font-size: 10px"
      >
        <h3> {{ question.content }} </h3>
        <el-radio-group v-if="question.questionType === 'judgment'" v-model="question.answer">
          <el-radio style="font-weight: bold" :label="true" value="true"> 正确 </el-radio>
          <el-radio style="font-weight: bold" :label="false" value="false"> 错误 </el-radio>
        </el-radio-group>
        <el-radio-group v-if="question.questionType === 'single'" v-model="question.answer">
          <el-radio
              v-for="(option, i) in question.optionList"
              :key="i"
              :label="getOptionLabel(i)"
              style="font-weight: bold"
          >{{ getOptionLabel(i) }} . {{ option.option }}</el-radio>
        </el-radio-group>
        <el-checkbox-group v-if="question.questionType === 'multiple'" v-model="question.myAnswerList">
          <el-checkbox
              v-for="(option, i) in question.optionList"
              :key="i"
              :label="getOptionLabel(i)"
              style="font-weight: bold"
          >{{ getOptionLabel(i) }} . {{ option.option }}</el-checkbox>
        </el-checkbox-group>

      </el-form-item>
      <el-button type="primary" @click="submitAnswers(exam.questions)">提交</el-button>
    </el-form>
  </div>
</template>

<script setup>
import {ref, onMounted, onBeforeMount, reactive} from 'vue';
import { ElMessage } from 'element-plus';
import examAPI from "@/api/module/exam";
import {useRoute} from "vue-router";

const answers = ref([])
const router = useRoute()
let exam=ref(null);

onMounted(async () => {
  let examId = router.query.examId;
  await getDetails(examId);
})

let answerDate = reactive(
  {
    examId:'',
    answerList: [],
  }
);

const getDetails =  async (id) => {
  await examAPI.detail(id).then((res) => {
    exam.value = res.data;
    if(exam.value.questions.length > 0){
      exam.value.questions.forEach(question => {
        if(question.questionType === 'single' || question.questionType === 'multiple'){
          question.optionList =  JSON.parse(question.options);
        }
      })
    }
    console.log(exam.value);
  }).catch((err) => {
    console.log(err)
  });
}

const getOptionLabel = (index) => {
  return String.fromCharCode(65 + index);
}

const submitAnswers = async (questions) => {
  questions.forEach((question) => {
    if(question.questionType === 'multiple'){
      question.answer = question.myAnswerList.join(',');
    }
  })
  let examId = router.query.examId;
  questions.forEach(question => {
    const answer={
      questionId:question.questionId,
      answer:question.answer,
    }
    answerDate.answerList.push(answer);
  })
  answerDate.examId = examId;
  await examAPI.submit(answerDate).then((res) => {
    if(res.code === 200) {
      ElMessage.success('提交成功！');
    }else {
      ElMessage.error(res.msg);
    }
  })
};
</script>